<template>
  <div class="chart" :style="{ height: '240px', width: '100%'}">
  </div>
</template>

<script>
import echarts from '@/utils/echarts'
export default {
  props: ['data'],
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      // this.chart = echarts.init(this.$el, 'macarons')
      this.chart = echarts.init(this.$el)
    }
  },
    watch:{
    data:function(val){
      console.log("饼图的数据:", val);
      this.chart.setOption({
        title: {
          text: '告警分类统计',
          // left: 'center'
          left: '76%', //居右显示
          textStyle: {
            color: '#23CEFD',
            fontSize: 14
          },
        },
        tooltip: {
          trigger: 'item'
        },
        // 图例显示到右边
        legend: {
          // left: 'left',
          orient: 'vertical',  //垂直显示
          textStyle: {  // 图列内容样式
            color: '#fff',  // 字体颜色
            fontSize: 10,
          },
          left: '82%', //居右显示
          top: 'center' //延Y轴居中
        },
        series: [
          {
            name: '告警统计',
            type: 'pie',
            radius:['50%', '70%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            // lv1蓝色--其他 lv2黄色--文保   lv3红色--江提  lv4橙色--水利
            data: [
              {value: val.lv4Total, name: '告警四级', itemStyle:{color:"#800701"}},
              {value: val.lv3Total, name: '告警三级', itemStyle:{color:"#E51C23"}},
              {value: val.lv2Total, name: '告警二级', itemStyle:{color:"#FFEB3B"}},
              {value: val.lv1Total, name: '告警一级', itemStyle:{color:"#0082f6"}}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
      //实现自适应部分
      this.chart.resize()
      window.addEventListener('resize',()=>{
        if (this.chart){
          this.chart.resize()
        }
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    //实现自适应部分
    window.addEventListener('resize',()=>{
      if (this.chart){
        this.chart.resize()
      }
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  }
}
</script>
